<template>
    <div class="card-item" v-loading="dataStatus=='loading'">
        <div class="h-full flex-center" v-if="dataStatus=='error'">
            <component-page-loading font-size="1rem" status="error" @reload="dataStatus = 'loading'"></component-page-loading>
        </div>
        <div class="h-full flex flex-col justify-between" v-else>
            <div class="item-title">
                <div>{{ $t('stats.game.best.doc-count.title') }}</div>
                <el-form :inline="true" :model="filterOption" class="flex" size="small">
                    <el-form-item class="mb-0">
                        <component-page-org-tree-option-check v-model="filterOption.plat_code_exclude" @change="getData"
                                                              :placeholder="$t('platform.setting.tree.org-exclude')" size="small">
                        </component-page-org-tree-option-check>
                    </el-form-item>
                    <el-form-item class="mb-0">
                        <component-page-game-option v-model="filterOption.game_id" @change="getData"></component-page-game-option>
                    </el-form-item>
                    <el-form-item class="mb-0">
                        <component-page-option-top-stats :option-stats="optionStats" :clearable="false"
                                                         v-model="filterOption.topStats" @change="getData">
                        </component-page-option-top-stats>
                    </el-form-item>
                    <el-form-item class="mb-0">
                        <component-page-option-datetime-range type="daterange" align="right" :clearable="false" class="w-56"
                                                              :init-last-day="60" v-model="filterOption.datetime" @change="getData">
                        </component-page-option-datetime-range>
                    </el-form-item>
                </el-form>
            </div>
            <div class="item-chart">
                <component-page-echarts ref="chartLine"></component-page-echarts>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataStatus: 'dle',
            filterOption: {
                topStats: {
                    stats: 'max',
                    from: 0,
                    size: 4,
                },
                plat_code: [],
                plat_code_exclude: [],
                game_id: [],
                datetime: null,
            },
            data: null,
        }
    },
    computed: {
        optionStats: function () {
            return {
                'max': this.$t('components.page.option.top-stats.stats.max'),
                'min': this.$t('components.page.option.top-stats.stats.min'),
            };
        }
    },
    watch: {
        '$i18n.locale': function (n, o) {
            if (this.data != null) {
                this.initChart(this.data);
            }
        },
    },
    methods: {
        initChart(chart) {
            let option = {
                color: ['#91c7ae', '#d48265', '#61a0a8', '#c23531', '#2f4554', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    type: 'scroll',
                    padding: [0, 100],
                    data: chart.legend.map(item => this.$t(`game.setting.game.games.${item}.label`))
                },
                grid: {
                    top: 40,
                    right: 40,
                    bottom: 40,
                    left: 70,
                },
                xAxis: {
                    show: true,
                    boundaryGap: false,
                    data: chart.times
                },
                yAxis: {
                    show: true,
                },
                series: chart.series.map(item => {
                    return Object.assign({type: 'line'}, {
                        name: this.$t(`game.setting.game.games.${item.name}.label`),
                        data: item.data.map(item => this.$store.getters['config/filterNumeral'](item, '0.[00]')),
                    });
                }),
            };
            // 渲染图表
            this.$refs.chartLine.setOption(option, true);
        },
        getData() {
            this.dataStatus = 'loading';
            axios.get(this.$helper.makeQueryUrl(
                '/stats/game/best/topDocCount', this.filterOption
            )).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataStatus = 'dle';
                    this.data = response.data.resp_data;
                    // 渲染图表
                    this.initChart(this.data);
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.dataStatus = 'error';
                }
            });
        },
    },
}
</script>

<style scoped>

</style>
